import React, { Component } from 'react'
import { Modal, Form, Input, message } from 'antd'
import { addOrUpdateUser } from '@/api/user-api.js'
class edit extends Component {
  state = {
    visible: false,
    confirmLoading: false,
    form: {},
  }

  showModal = (v) => {
    this.setState({
      visible: true,
      form: v,
    })
  }

  handleOk = (e) => {
    this.setState({
      confirmLoading: true,
    })
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        addOrUpdateUser(values).then((v) => {
          if (v.status === 0) {
            message.success('保存成功')
            this.setState(
              {
                visible: false,
                confirmLoading: false,
              },
              () => {
                this.props.getList()
              }
            )
          }
        })
      }
    })
  }

  handleCancel = () => {
    this.setState({
      visible: false,
    })
  }
  render() {
    const { visible, confirmLoading } = this.state
    const { getFieldDecorator } = this.props.form
    return (
      <Modal
        title="编辑"
        visible={visible}
        onOk={this.handleOk}
        confirmLoading={confirmLoading}
        onCancel={this.handleCancel}
      >
        <Form>
          <Form.Item label="用户名">
            {getFieldDecorator('username', {
              initialValue: this.state.form.username,
              rules: [{ required: true, message: '必须填写用户名' }],
            })(<Input type="username" placeholder="用户名" />)}
          </Form.Item>
          <Form.Item label="密码">
            {getFieldDecorator('password', {
              initialValue: this.state.form.password,
              rules: [{ required: true, message: '必须输入密码' }],
            })(<Input type="password" placeholder="密码" />)}
          </Form.Item>
          <Form.Item label="电话号码">
            {getFieldDecorator('phone', {
              initialValue: this.state.form.phone,
              rules: [{ required: true, message: '必须填写电话号码' }],
            })(<Input type="phone" placeholder="电话号码" />)}
          </Form.Item>
          <Form.Item label="电子邮箱">
            {getFieldDecorator('email', {
              initialValue: this.state.form.email,
              rules: [{ required: true, message: '必须填写电子邮箱' }],
            })(<Input type="email" placeholder="电子邮箱" />)}
          </Form.Item>
          <Form.Item label="角色">
            {getFieldDecorator('role_id')(
              <Input type="role_id" placeholder="角色" />
            )}
          </Form.Item>
        </Form>
      </Modal>
    )
  }
}
export default Form.create()(edit)
